<template>
    <div class="load-bigbox">
        <div class="load-box">
            <img :src=loada  class="imga">
            <div class="imgb">

            </div>
            <div class="imgc" ref="imgc">

            </div>
            <p class="load-p" ref="loadp">33%</p>
        </div>

    </div>
</template>

<script setup>
import { ref, onMounted,onUnmounted} from 'vue'
import { useRouter } from 'vue-router'
import loada from '@/assets/images_slices/loadpop.png'
import backgroundOne from '@/assets/img/backgroundOne.png'
import backgroundTwo from '@/assets/img/background-2.png'
let router = useRouter()
//控制.imgc的宽
let imgc = ref(null)
let loadp = ref(null)

let timer = null;

let loadFinished = ref(false);



onMounted(() => {
  const preloadImages = [backgroundOne, backgroundTwo].map(src => {
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.src = src;  
      img.onload = () => resolve(img);
      img.onerror = (error) => {  
        reject(new Error(`图片加载失败: ${src}`));
      };  
    });  
  });  
   
  Promise.all(preloadImages).then(() => {  
    console.log('所有图片预加载完成');  
    loadFinished.value = true;
  }).catch(error => {  
    console.error('图片预加载失败', error.message);  
  }); 




    timer = setInterval(() => {  
        let width = 0; // 假设这里的 width 应该是一个外部状态或者从某处获取  
        if (imgc.value && imgc.value.style) {  
            width = parseInt(imgc.value.style.width.replace('px', '')) || 0; // 获取当前宽度
            width += 1;  
            imgc.value.style.width = width + 'px';  
            loadp.value.innerHTML = parseInt(width / 5.4) + '%';  
            if(width==535){
                if(loadFinished.value){
                    width=540
                    loadp.value.innerHTML=100+'%';
                    clearInterval(timer);  
                sessionStorage.setItem("load", "true");
                setTimeout(() => {  
                    router.push("/main");  
                }, 10);  
                }
            }
        }  
    }, 5);  
});  
  
onUnmounted(() => {  
    if (timer) {  
        clearInterval(timer);  
    }  
});  

</script>
<style scoped lang="less">
.load-bigbox {
    width: 100vw;
    height: 100vh;
    background: url('@/assets/images_slices/loadbj.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .load-box {
        width: 600px;
        height: 500px;
        position: relative;
    }

    .imga {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .imgb {
        width: 748px;
        height: 212px;
        background: url(@/assets/images_slices/loading.png);
        background-position: 900px 385px;
        background-size: 741px auto;
        position: absolute;
        top: 66.3%;
        left: 36.2%;
        transform: translate(-50%, -50%);
    }

}

.imgc {
    width: 540px;
    height: 45px;
    position: absolute;
    background: url(@/assets/images_slices/jiazai.png) no-repeat;
    top: 75.4%;
    left: 7.7%;
    background-position: 0px 0px;
    background-size: 534px 46px;
}

/* 媒体查询 .load-bigbox 低于1000px改为1000*/
@media screen and (max-width: 1000px) {
    .load-bigbox {
        width: 1000px;
    }
}
/* 媒体查询 .load-bigbox 高度低于1550px改为1550*/
@media screen and (max-height: 500px) {
    .load-bigbox {
        height: 500px;
}
}
.load-p {
    color: #1768d8;
    font-size: 25px;
    font-weight: 700;
    position: absolute;
    top: 92%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>